<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>播放历史 - Dark Video</title>
    <link th:href="@{/assets/zui/css/zui.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/common.css}" rel="stylesheet">
</head>
<body>

<!-- 头部 -->
<nav th:replace="common/nav::html"></nav>
<div class="container">
    <div class="list list-condensed">
        <header>
            <h3><i class="icon-list-ul"></i> 播放历史</h3>
        </header>
        <div class="items items-hover" th:each="history: ${page.records}">
            <div class="item">
                <div class="item-heading">
                    <div class="pull-right label label-success" th:text="${history.contentVO.type}">维基</div>
                    <h4><a target="_blank" th:href="'/content/'+${history.contentVO.id}" th:text="${history.contentVO.name}"></a></h4>
                </div>
                <div class="item-content">
                    <div class="media pull-right"><img th:src="${history.contentVO.thumbnail}"></div>
                    <div class="text" th:text="${history.contentVO.desc}">
                    </div>
                </div>
                <div class="item-footer">
                    <a href="#" class="text-muted"><i class="icon-user" th:text="${' '+history.contentVO.author}"></i></a> &nbsp;
                    <a href="#" class="text-muted"><i class="icon-comments" th:text="${' '+history.contentVO.commentCount}"></i></a> &nbsp;
                    <span class="text-muted" th:text="${#dates.format(history.lookDate, 'yyyy-MM-dd HH:mm:ss')}"></span> &nbsp;&nbsp;
                    <span class="text-muted" th:if="${history.contentVO.firstCategoryName}" th:text="${'| ' + history.contentVO.firstCategoryName}"></span>
                    <span class="text-muted" th:if="${history.contentVO.secondCategoryName}" th:text="${'| ' + history.contentVO.secondCategoryName}"></span> &nbsp;
                    <button class="btn ml32" th:onclick="${'removeHistory(&quot;'+history.id+'&quot;,this)'}">删除记录</button>
                </div>
            </div>
        </div>
        <footer>
            <!-- 分页器 -->
            <ul id="myPager" class="pager" data-ride="pager" data-elements=["first","prev","nav","last","next","goto"]
                th:if="${page.total} > 0"
                th:attr="data-page=${page.current}, data-rec-total=${page.total}, data-rec-per-page=${page.size}"></ul>
        </footer>
    </div>
</div>
<script th:src="@{/assets/js/jquery.js}"></script>
<script th:src="@{/assets/js/http.js}"></script>
<script th:src="@{/assets/layer/layer.js}"></script>
<script th:src="@{/assets/zui/js/zui.min.js}"></script>
<script>
    $('#myPager').on('onPageChange', function(e, state, oldState) {
        if(oldState.page != null) {
            if (state.page !== oldState.page) {
                window.location.href = window.location.pathname + '?current=' + state.page;
            }
        }
    });

    function removeHistory(id, obj) {
        sendJson("delete", "/content/history/" + id, null, false, function (res) {
                if (res.code === 0) {
                    layer.msg("记录已删除。", {icon: 1});
                    $(obj).parent().parent().parent().remove();
                } else {
                    layer.msg(res.message, {icon: 2});
                }
            },
            function () {
                layer.msg("未知错误", {icon: 2});
            });
    }
</script>
</body>
</html>